<template>
  <div class="home-contianer">
    <el-scrollbar style="height:100%;">
      <div style>
        <div data-v-542f4644 class="ivu-row">
          <div
            v-for="item in topColor"
            :key="item.name"
            class="ivu-col ivu-col-span-6"
          >
            <div class="item-name">
              {{ item.name }}
              <Tooltip class="icon" placement="left-start">
                <Icon type="ios-information-circle-outline" />
                <div slot="content">
                  <p>{{ item.name }}</p>
                </div>
              </Tooltip>
            </div>
            <div class="total">
              ￥{{
                (item.total + "").replace(
                  /(\d{1,3})(?=(\d{3})+(?:$|\.))/g,
                  "$1,"
                )
              }}
            </div>
            <div class="rate">
              <span>
                <span>环比{{ item.down }}%</span>
                <Icon v-if="item.down >= 0" class="up" type="md-arrow-dropup" />
                <Icon v-else class="down" type="md-arrow-dropdown" />
              </span>
              <span>
                <span>同比{{ item.up }}%</span>
                <Icon v-if="item.up >= 0" class="up" type="md-arrow-dropup" />
                <Icon v-else class="down" type="md-arrow-dropdown" />
              </span>
            </div>
            <div class="bottom">平均增长趋势{{ item.up }}%</div>
          </div>
        </div>
        <div data-v-542f4644 class="ivu-row">
          <div class="ivu-col ivu-col-span-6" v-show="administratorShow">
            <!-- style="color: #2db7f5;" -->
            <div class="item-name">
              <p>
                短信充值
              </p>
              <Tooltip class="icon" placement="left-start">
                <Icon type="ios-information-circle-outline" />
                <div slot="content">
                  <p>(条数)剩余短信数量</p>
                </div>
              </Tooltip>
            </div>
            <div class="totalCopy">
              <span style="font-size:14px;">短信余量:</span>{{ MSgTotal
              }}<span style="font-size:14px;">&nbsp;条</span
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-size:14px;"
                >短信使用量/总量:&nbsp;&nbsp;{{ subtractionTotal }}/{{
                  MsgAllTotal
                }}&nbsp;条</span
              >
            </div>
            <div class="bottom floatRight czline" v-if="limits">
              <el-button
                size="small"
                type="primary"
                @click="
                  () => {
                    this.modelthree = true;
                    this.mainData.amount_total =
                      this.mainData.totalExpenses * 0.05;
                    this.mainData.payment_method = '';
                    this.ipAddress = '';
                  }
                "
              >
                短信余额充值</el-button
              >
            </div>
          </div>
          <div class="ivu-col ivu-col-span-6">
            <div class="item-name">
              应收账户余额
              <Tooltip class="icon" placement="left-start">
                <Icon type="ios-information-circle-outline" />
                <div slot="content">
                  <p>应收账户余额</p>
                </div>
              </Tooltip>
            </div>
            <div class="total">
              <span>
                <el-select
                  size="small"
                  v-model="distributor"
                  @change="creditLimit($event)"
                  placeholder="请选择"
                  filterable
                  :popper-append-to-body="false"
                  :reserve-keyword="true"
                  style="width:250px;"
                >
                  <el-option
                    v-for="item in distributorList"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                  >
                  </el-option>
                </el-select>
              </span>
              <span style="" v-loading="loadingOne"
                >￥{{
                  balance_total.replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, "$1,")
                }}</span
              >
            </div>
            <div class="bottom floatRight">
              <el-button
                type="primary"
                size="small"
                @click="
                  () => {
                    this.model = true;
                    this.mainData.amount_total = '';
                    this.mainData.notes = '';
                    this.mainData.payment_method = '';
                    this.ipAddress = '';
                  }
                "
                >应收账余额充值</el-button
              >
            </div>
          </div>
        </div>
        <div
          style="
                    margin: 15px;
                    margin-top: 0;
                    padding-bottom: 20px;
                    background: white;
                  "
        >
          <flex></flex>
        </div>
        <div class="charts-line">
          <div
            id="charts-line"
            class="left"
            style="height:800px; margin: 15px;"
          ></div>
          <div class="right" style=""></div>
        </div>
        <!-- <div style="background:#fff; margin: 0 13px;">
          <div class="h5-desc">
            <Divider>移动H5页面(此处是H5页面,可点击--功能未实现)</Divider>
          </div>
          <div class="home-app">
            <div class="list">
              <Cow></Cow>
            </div>
            <div class="list">
              <Community></Community>
            </div>

            <div class="list">
              <Question></Question>
            </div>
          </div>
        </div> -->
      </div>
    </el-scrollbar>
    <vol-box
      :model.sync="model"
      :padding="10"
      :title="mainData.account_name"
      :width="600"
      :height="500"
    >
      <VolForm
        ref="myforms"
        :formFileds="mainData"
        :formRules="formRules"
        :labelWidth="100"
      >
      </VolForm>
      <el-form
        ref="formRef"
        :model="mainData"
        size="default"
        label-width="70px"
      >
        <el-row :gutter="35">
          <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
            <el-form-item>
              <el-radio-group
                v-model="mainData.payment_method"
                @change="getValues($event, 2)"
              >
                <div class="divstyle">
                  <el-radio label="A01" size="large"
                    >&nbsp;&nbsp;&nbsp;&nbsp;<img
                      class="radioImg"
                      src="../assets/imgs/支付宝.png"
                    />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;支付宝</el-radio
                  >
                  <el-radio label="W01" size="large"
                    >&nbsp;&nbsp;&nbsp;&nbsp;<img
                      class="radioImg"
                      src="../assets/imgs/微信.png"
                    />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;微信</el-radio
                  >
                  <el-radio label="U01" size="large"
                    >&nbsp;&nbsp;&nbsp;&nbsp;<img
                      class="radioImg"
                      src="../assets/imgs/UnionPay.png"
                    />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;银联</el-radio
                  >
                </div>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
            <el-form-item>
              <!-- <div style="padding: 10px 20px"> -->
              <div
                class="block"
                v-loading="loading"
                v-if="this.ipAddress != ''"
              >
                <el-image
                  style="width: 200px; height:200px;"
                  :src="this.ipAddress"
                  id="qrcode"
                >
                </el-image>
              </div>
              <!-- </div> -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <!-- <Button type="success"  @click="Rechargeable">保存</Button> -->
        <!-- <Button type="success" @click="Rechargeable">去充值</Button> -->
        <Button
          type="info"
          @click="
            () => {
              this.model = false;
            }
          "
          >关闭</Button
        >
      </div>
    </vol-box>
    <vol-box
      :model.sync="modelTwo"
      title="二维码"
      :height="400"
      :width="400"
      :padding="15"
    >
      <div style="padding: 0px 0px">
        <div class="demo-image__preview">
          <el-image
            style="width: 200px; height:200px;"
            :src="this.ipAddress"
            id="qrcode"
          >
          </el-image>
        </div>
      </div>
      <div slot="footer">
        <Button type="default" @click="model.box1 = false">关闭</Button>
      </div>
    </vol-box>
    <vol-box
      :model.sync="modelthree"
      title="短信充值"
      :height="500"
      :width="650"
      :padding="15"
    >
      <el-form ref="form" :model="mainData" label-width="100px">
        <el-form-item label="充值短信量:">
          <el-input v-model="mainData.totalExpenses" disabled></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-radio-group
            v-model="mainData.tabPosition"
            @change="getValue()"
            style="margin-bottom: 30px;"
          >
            {{ mainData.tabPosition }}
            <!-- <el-radio-button label="2">2</el-radio-button> -->
            <el-radio-button label="1000">1000</el-radio-button>
            <el-radio-button label="5000">5000</el-radio-button>
            <el-radio-button label="10000">10000</el-radio-button>
            <el-radio-button label="50000">50000</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="费用合计:">
          <el-input v-model="mainData.amount_total" disabled></el-input>
        </el-form-item>
        <el-row :gutter="35">
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <el-form-item>
              <el-radio-group
                v-model="mainData.payment_method"
                @change="getValues($event, 1)"
              >
                <div class="divstyle">
                  <el-radio label="A01" size="large"
                    >&nbsp;&nbsp;&nbsp;&nbsp;<img
                      class="radioImg"
                      src="../assets/imgs/支付宝.png"
                    />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;支付宝</el-radio
                  >
                  <el-radio label="W01" size="large"
                    >&nbsp;&nbsp;&nbsp;&nbsp;<img
                      class="radioImg"
                      src="../assets/imgs/微信.png"
                    />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;微信</el-radio
                  >
                  <el-radio label="U01" size="large"
                    >&nbsp;&nbsp;&nbsp;&nbsp;<img
                      class="radioImg"
                      src="../assets/imgs/UnionPay.png"
                    />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;银联</el-radio
                  >
                </div>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <!-- v-if="this.ipAddress!=''" -->
          <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
            <el-form-item>
              <!-- <div style="padding: 0px 0px"> -->
              <div
                class="block"
                v-loading="loading"
                v-if="this.ipAddress != ''"
              >
                <el-image
                  style="width: 200px; height:200px;"
                  :src="this.ipAddress"
                  id="qrcode"
                >
                </el-image>
              </div>
              <!-- </div> -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <Button
          type="info"
          @click="
            () => {
              this.modelthree = false;
            }
          "
          >关闭</Button
        >
        <!-- <Button type="primary" @click="closeChild()">支付</Button> -->
      </div>
    </vol-box>
  </div>
</template>

<script>
import "echarts/map/js/china";
import china from "echarts/map/json/china.json";
import Community from "@/../src/components/Community/index.vue";
import Cow from "@/../src/components/Community/cow.vue";
import Question from "@/../src/components/Community/question.vue";
import flex from "@/../src/views/charts/flex.vue";
var echarts = require("echarts");

export default {
  components: {
    Community: Community,
    Cow: Cow,
    Question: Question,
    flex,
    VolBox: () => import("@/components/basic/VolBox.vue"),
    VolForm: () => import("@/components/basic/VolForm.vue")
  },

  data() {
    return {
      n: 90,
      loading: false,
      loadingOne: false,
      MSgTotal: 0,
      MsgAllTotal: 0,
      subtractionTotal: 0,
      merchantCode: "",
      options: {},
      timer: "",
      timers: null,
      internal_id_fk: "",
      refreshData: null,
      cell: [],
      distributorList: [],
      distributor: "",
      balance_total: "0.00",
      account_code_fk: "",
      account_name: "",
      model: false,
      modelTwo: false,
      modelthree: false,
      administratorShow: false,
      ipAddress: "../assets/imgs/微信.png",
      mainData: {
        totalExpenses: "1000",
        tabPosition: "1000",
        notesb: "", //备注（表格）
        account_alias: "", //应收账户编号
        account_name: "",
        account_code: "", //应收账户编号(后端)
        out_order_id: null, //外部订单编号
        business_date: new Date(), //营业日期
        type_func: 17, //功能类型（入账(11 充值 12消费 13 退款)，2-转账，3-调整，4-冲账）
        type_record: 3, //入账类型（1-渠道挂账，2-自动挂账，3-手工挂账，4-第三方挂账）
        amount_total: 1000 * 0.05, //单笔总消费金额
        verify_status: 1, //核销核验（1-未核验，2-已核验）
        notes: "", //备注
        is_valid: 1, //是否有效
        creator: "", //操作人
        payment_method: ""
      },
      formRules: [
        [
          {
            title: "应收账户名称",
            required: true,
            field: "account_name",
            type: "text",
            colSize: 12,
            disabled: true
          }
        ],
        [
          {
            title: "充值金额",
            required: true,
            field: "amount_total",
            type: "text",

            colSize: 12
          }
        ],

        [
          {
            title: "备注",
            required: true,
            field: "notes",
            colSize: 12,
            type: "textarea"
          }
        ]
      ],
      showZT: false,
      topColor: [
        {
          name: "订单金额",
          desc: "#205",
          background: "rgb(25, 190, 107)",
          total: 0,
          down: 0,
          up: 0,
          icon: "ios-home"
        },
        {
          name: "支付金额",
          desc: "#412",
          total: 0,
          down: 0,
          up: 0,
          background: "rgb(45, 183, 245)",
          icon: "ios-help-buoy"
        },
        {
          name: "退货金额",
          total: 0,
          down: 0,
          up: 0,
          background: "rgb(237, 64, 20)",
          icon: "ios-navigate"
        }
      ],
      value1: "1",
      fifth: null,
      limits: true
    };
  },
  created() {
    this.getInfo();
    this.distributorLists();
    this.$nextTick(() => {
      this.SMSRecharge();
    });
  },
  beforeDestroy() {
    clearInterval(this.refreshData);
    this.refreshData = null;
  },
  watch: {
    "mainData.totalExpenses": {
      handler() {
        // console.log("123456");
        this.mainData.amount_total = this.mainData.totalExpenses * 0.05;
      },
      immediate: true,
      deep: true
    },
    "mainData.totalExpenses"(n, v) {
      this.mainData.amount_total = this.mainData.totalExpenses * 0.05;
    },
    "mainData.amount_total"() {
      if (
        this.mainData.amount_total != "" &&
        this.mainData.payment_method != "" &&
        this.mainData.notes != ""
      ) {
        this.Rechargeable();
      }
    }
  },
  mounted() {
    this.administratorShow =
      JSON.parse(sessionStorage.getItem("user")).userType == null
        ? true
        : false;

    this.refreshData = setInterval(() => {
      this.getInfo();
    }, 1000 * 60 * 60);
    this.fifth = setTimeout(() => {
      clearTimeout(this.timer);
    }, 1000 * 60 * 5);
    this.SMSRecharge();
    //this.echarts.registerMap('china',china);
    var myChart = echarts.init(document.getElementById("charts-line"));
    var mapName = "china";
    var data = [];
    var toolTipData = [];
    /*获取地图数据*/
    myChart.showLoading();
    var mapFeatures = echarts.getMap(mapName).geoJson.features;
    myChart.hideLoading();
    var geoCoordMap = {
      将军山: [88.187479, 47.828272],
      //'新疆阿拉泰': [88.13963, 47.848393],
      重庆: [107.7539, 30.1904],
      西安: [109.1162, 34.2004],
      成都: [103.9526, 30.7617],
      邯郸: [114.490686, 36.612273],
      北京: [116.4551, 40.2539],
      哈尔滨: [126.63333, 45.75],
      海南: [109.3, 19.3],
      张家口: [114.52, 40.3],
      天津: [117.2, 39.13],
      青岛: [119.3, 35.35],
      新疆: [87.627704, 43.793026],
      西藏: [91.132212, 29.660361],
      太原: [111.3, 37.27],
      秦皇岛: [119.6, 39.3],
      石家庄: [113.3, 37.27],
      桂林: [109.45, 24.18]
    };

    var GZData = [
      [
        {
          name: "张家口"
        },
        {
          name: "将军山",
          value: 95
        }
      ],
      [
        {
          name: "将军山"
        },
        {
          name: "张家口",
          value: 95
        }
      ],
      //  [{
      //      name: '张家口'
      //  }, {
      //      name: '新疆阿拉泰',
      //      value: 80
      //  }],
      //  [{
      //      name: '新疆阿拉泰'
      //  }, {
      //      name: '张家口',
      //      value: 80
      //  }],
      [
        {
          name: "北京"
        },
        {
          name: "天津",
          value: 80
        }
      ],
      [
        {
          name: "张家口"
        },
        {
          name: "秦皇岛",
          value: 70
        }
      ],
      [
        {
          name: "邯郸"
        },
        {
          name: "西安",
          value: 60
        }
      ],
      [
        {
          name: "石家庄"
        },
        {
          name: "张家口",
          value: 60
        }
      ],
      [
        {
          name: "秦皇岛"
        },
        {
          name: "石家庄",
          value: 60
        }
      ],
      [
        {
          name: "石家庄"
        },
        {
          name: "秦皇岛",
          value: 60
        }
      ],
      [
        {
          name: "北京"
        },
        {
          name: "石家庄",
          value: 60
        }
      ],
      [
        {
          name: "西安"
        },
        {
          name: "邯郸",
          value: 60
        }
      ],
      [
        {
          name: "太原"
        },
        {
          name: "成都",
          value: 50
        }
      ],
      [
        {
          name: "成都"
        },
        {
          name: "太原",
          value: 50
        }
      ],
      [
        {
          name: "北京"
        },
        {
          name: "太原",
          value: 50
        }
      ],
      [
        {
          name: "太原"
        },
        {
          name: "北京",
          value: 50
        }
      ],
      [
        {
          name: "邯郸"
        },
        {
          name: "青岛",
          value: 50
        }
      ],
      [
        {
          name: "青岛"
        },
        {
          name: "邯郸",
          value: 50
        }
      ],
      [
        {
          name: "张家口"
        },
        {
          name: "邯郸",
          value: 40
        }
      ],
      [
        {
          name: "邯郸"
        },
        {
          name: "桂林",
          value: 40
        }
      ],
      [
        {
          name: "桂林"
        },
        {
          name: "邯郸",
          value: 40
        }
      ],
      [
        {
          name: "张家口"
        },
        {
          name: "北京",
          value: 30
        }
      ],
      [
        {
          name: "北京"
        },
        {
          name: "哈尔滨",
          value: 20
        }
      ],
      [
        {
          name: "哈尔滨"
        },
        {
          name: "北京",
          value: 20
        }
      ],
      [
        {
          name: "北京"
        },
        {
          name: "海南",
          value: 10
        }
      ],
      [
        {
          name: "海南"
        },
        {
          name: "北京",
          value: 10
        }
      ],
      [
        {
          name: "新疆"
        },
        {
          name: "张家口",
          value: 80
        }
      ],
      [
        {
          name: "张家口"
        },
        {
          name: "新疆",
          value: 80
        }
      ]
    ];

    var convertData = function(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = geoCoordMap[dataItem[0].name];
        var toCoord = geoCoordMap[dataItem[1].name];
        if (fromCoord && toCoord) {
          res.push({
            fromName: dataItem[0].name,
            toName: dataItem[1].name,
            coords: [toCoord, fromCoord]
          });
        }
      }
      return res;
    };

    var planePath =
      "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
    var color = ["red"];
    var series = [];
    [["张家口", GZData]].forEach(function(item, i) {
      series.push(
        {
          name: item[0],
          type: "lines",
          zlevel: 2,
          symbol: ["none", "none"],
          symbolSize: 10,
          effect: {
            show: true,
            period: 6,
            trailLength: 0,
            symbol: planePath,
            symbolSize: 15
          },
          lineStyle: {
            normal: {
              color: color[i],
              width: 1,
              opacity: 0.6,
              curveness: 0.2
            }
          },
          data: convertData(item[1])
        },
        {
          name: item[0],
          type: "effectScatter",
          coordinateSystem: "geo",
          zlevel: 2,
          rippleEffect: {
            brushType: "stroke"
          },
          label: {
            normal: {
              show: true,
              position: "right",
              formatter: "{b}"
            }
          },
          symbolSize: function(val) {
            return val[2] / 8;
          },
          itemStyle: {
            normal: {
              color: color[i]
            }
          },
          data: item[1].map(function(dataItem) {
            return {
              name: dataItem[1].name,
              value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
            };
          })
        }
      );
    });

    let option = {
      tooltip: {
        trigger: "item"
      },
      geo: {
        map: "china",
        label: {
          emphasis: {
            show: false
          }
        },
        roam: true,
        itemStyle: {
          normal: {
            //          	color: '#ddd',
            borderColor: "rgba(147, 235, 248, 1)",
            borderWidth: 1,
            areaColor: {
              type: "radial",
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(175,238,238, 0)" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(	47,79,79, .1)" // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            },
            shadowColor: "rgba(128, 217, 248, 1)",
            // shadowColor: 'rgba(255, 255, 255, 1)',
            shadowOffsetX: -2,
            shadowOffsetY: 2,
            shadowBlur: 10
          },
          emphasis: {
            areaColor: "#389BB7",
            borderWidth: 0
          }
        }
      },
      series: series
    };
    this.getTreeMenu();
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function() {
      myChart.resize();
    });
  },
  methods: {
    getTreeMenu() {
      this.http.get("api/menu/getTreeMenu").then(res => {
        let arr = res.filter(i => {
          return i.id == 512;
        });
        if (arr.length) {
          if (arr[0].permission.includes("SMSRecharge")) {
            this.limits = true;
          } else {
            this.limits = false;
          }
        } else {
          this.limits = false;
        }
      });
    },
    getInfo() {
      this.http.get("api/index").then(res => {
        this.topColor = [];
        this.topColor.push(...res.data);
      });
      this.distributorLists();
    },
    distributorLists() {
      this.http
        .post("/api/Dictionary/GetVueDictionary", ["distributorList"])
        .then(res => {
          this.distributorList = [];
          res.forEach(o => {
            if (o.dicNo == "distributorList") {
              o.data.forEach(i => {
                let obj = {
                  value: i.value,
                  key: i.key
                };
                this.distributorList.push(obj);
              });
              this.distributor = this.distributorList[0].key;
              this.creditLimit(this.distributor);
            }
          });
        });
    },
    creditLimit(val) {
      this.loadingOne = true;
      this.http
        .post("/api/AccountsMain/GetAccountsByDistriAccount", { code: val })
        .then(res => {
          if (res.data.length > 0) {
            this.balance_total = res.data[0].balance_total.toFixed(2);
            this.account_code_fk = res.data[0].account_code_fk;
            this.mainData.account_name = res.data[0].account_name;
            this.showZT = true;
            this.loadingOne = false;
          } else {
            console.log("没有应收账户");
            this.showZT = false;
            this.balance_total = "0.00";
            this.loadingOne = false;
          }
        });
    },
    Rechargeable() {
      this.ipAddress = "";
      if (sessionStorage.getItem("user")) {
        this.mainData.creator = JSON.parse(
          sessionStorage.getItem("user")
        ).userName;
      }
      let option = {
        account_alias: "", //应收账户编号
        account_code: this.account_code_fk, //应收账户编号(后端)
        // account_name:this.mainData.account_name,
        out_order_id: null, //外部订单编号
        business_date: new Date(), //营业日期
        type_func: 17, //功能类型（入账(11 充值 12消费 13 退款)，2-转账，3-调整，4-冲账）
        type_record: 3, //入账类型（1-渠道挂账，2-自动挂账，3-手工挂账，4-第三方挂账）
        amount_total: this.mainData.amount_total, //单笔总消费金额
        verify_status: 1, //核销核验（1-未核验，2-已核验）
        is_valid: 1, //是否有效
        creator: this.mainData.creator, //操作人
        payment_type: this.mainData.payment_method,
        notes: this.mainData.notes,
        internal_id_fk: ""
      };
      this.loading = true;
      this.http.post("/api/AccountsDetail/AccountingQR", option).then(res => {
        // console.log(this.http.ipAddress + res.data, "this.http.ipAddress");
        if (res.status) {
          // this.modelTwo = true;
          this.ipAddress = this.http.ipAddress + res.data.url;
          this.internal_id_fk = res.data.reqsn;
          option.internal_id_fk = res.data.reqsn;
          this.timer = setTimeout(() => {
            this.RechargeableSearch(option);
            // this.$message.success(res.message);
          }, 10000);
          this.loading = false;
        } else {
          // this.modelTwo = true;
          this.ipAddress = "";
          // this.$message.error("二维码生成失败");
          this.loading = false;
        }
      });
    },
    RechargeableSearch(option) {
      this.http.post("/api/AccountsDetail/GetQR", option).then(res => {
        if (res.message == "查询成功") {
          this.RechargeableQS(option);
          this.model = false;
          this.modelTwo = false;
          clearTimeout(this.timer);
        } else if (res.message == "交易处理中") {
          let i = 0;
          // console.log("交易处理中");
          this.timer = setTimeout(() => {
            // console.log("交易处理中");
            this.RechargeableSearch(option);
          }, 10000);
        }
      });
    },
    RechargeableSearchQX(option) {
      this.http.post("/api/AccountsDetail/GetQRDX", option).then(res => {
        if (res.message == "查询成功") {
          this.UpdateRecharge(option);
          this.model = false;
          this.modelthree = false;
          clearTimeout(this.timer);
        } else if (res.message == "交易处理中") {
          let i = 0;
          // console.log("交易处理中");
          this.timer = setTimeout(() => {
            // console.log("交易处理中");
            this.RechargeableSearchQX(option);
          }, 10000);
        }
      });
    },
    RechargeableQS(val) {
      this.http.post("/api/AccountsDetail/AccountsDetailSet", val).then(res => {
        if (res.status) {
          this.mainData.amount_total = "";
          this.mainData.notes = "";
          this.$message.success("充值成功");
          this.model = false;
        } else {
          this.$message.error("充值失败");
          this.mainData.amount_total = "";
          this.mainData.notes = "";
          this.model = false;
        }
      });
    },
    RechargeableDX() {
      this.ipAddress = "";
      let option = {
        amount_total: this.mainData.amount_total, //单笔总消费金额
        Type: this.mainData.payment_method,
        notes: this.mainData.notes,
        MsgNub: this.mainData.totalExpenses
      };
      this.loading = true;
      this.http.post("/api/AccountsDetail/AccountingQRDX", option).then(res => {
        console.log(this.http.ipAddress + res.data, "this.http.ipAddress");
        if (res.status) {
          // this.modelTwo = true;
          this.ipAddress = this.http.ipAddress + res.data.url;
          this.internal_id_fk = res.data.reqsn;
          if (!this.timers) {
            this.timers = setTimeout(() => {
              this.RechargeableSearchQX({
                internal_id_fk: this.internal_id_fk
              });
              this.timers = null;
            }, 5000);
          }
          this.loading = false;
        } else {
          this.loading = false;
          this.ipAddress = "";
        }
      });
    },
    getValue() {
      this.mainData.totalExpenses = this.mainData.tabPosition;
      if (
        this.mainData.tabPosition != "" &&
        this.mainData.totalExpenses != "" &&
        this.mainData.amount_total != "" &&
        this.mainData.payment_method != ""
      ) {
        this.RechargeableDX();
      }
    },
    // 修改充值条数
    UpdateRecharge(option) {
      let options = option.internal_id_fk;
      this.http
        .post("/api/AccountsDetail/UpdateMessage", { serialNumber: options })
        .then(res => {
          console.log(res, "res");
          if (res.status) {
            console.log(res.message, "res");
            this.SMSRecharge();
          }
        });
    },
    getValues(val, num) {
      if (num == 1) {
        console.log(num, "num1");
        if (this.mainData.amount_total == "") {
          return this.$message.error("费用合计为空,请选择充值短信量");
        }
        this.RechargeableDX();
      } else {
        this.$refs.myforms.validate(() => {
          this.Rechargeable();
        });
      }
    },
    SMSRecharge() {
      // mall_message_account
      if (sessionStorage.getItem("user")) {
        this.merchantCode = JSON.parse(
          sessionStorage.getItem("user")
        ).merchantCode;
      }
      let param = {
        order: "desc",
        page: 1,
        rows: 20,
        sort: "id",
        wheres: `[{\"name\":\"merchantCode\",\"value\":\"${this.merchantCode}\",\"displayType\":\"text\"}]`
      };

      let url = `/api/Mall_message_account/GetMessageAccount`;
      this.http.post(url, param).then(res => {
        this.MSgTotal = res.rows.length > 0 ? res.rows[0].number : 0;
        this.MsgAllTotal = res.rows.length > 0 ? res.rows[0].total : 0;
        this.subtractionTotal = this.MsgAllTotal - this.MSgTotal;

        // console.log(res.rows[0], "res");
      });
    }
  },
  destroyed() {
    clearInterval(this.timer);
    clearTimeout(this.fifth);
  }
};
</script>
<style lang="less" scoped>
.czline {
  border-top: 1px soild #ccc;
}
.radioImg {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.divstyle {
  margin-right: 20px;
  margin-top: 20px;
}
.divstyle .el-radio {
  margin-bottom: 60px;
}
.home-contianer {
  background: #efefef;
  width: 100%;
  height: 100%;
  /* padding: 20px; */
}
.home-app {
  display: inline-block;
  /* display: -webkit-flex;
  display: flex; */
  padding: 15px;
  padding-top: 5px;
}
.home-app > div {
  float: left;
  width: 33.33333%;
  padding-left: 8px;
  padding-right: 8px;
}
.ivu-card-body {
  text-align: center;
  padding: 25px 13px;
  padding-left: 80px;
}
.demo-color-name {
  color: #fff;
  font-size: 16px;
}
.demo-color-desc {
  color: #fff;
  opacity: 0.7;
}
.ivu-card {
  position: relative;
}
.ivu-card .icon-left {
  border-right: 1px solid;
  padding: 10px 24px;
  height: 100%;
  position: absolute;
  font-size: 50px;
  color: white;
}
.ivu-row {
  display: flex;
  border-bottom: 2px dotted #eee;
  padding: 0px 5px;
  .ivu-col {
    border-radius: 4px;
    background: white;
    flex: 1;
    margin: 13px 8px;
    padding: 20px 20px;
    padding-bottom: 15px;
  }
  .total {
    word-break: break-all;
    color: #282727;
    font-size: 30px;
    padding-bottom: 5px;
    vertical-align: middle;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC,
      Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial,
      sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  }
  .totalCopy {
    font-size: 30px;
    padding-bottom: 5px;
  }
  .item-name {
    position: relative;
    .icon {
      position: absolute;
      right: 0;
      top: -1px;
    }
  }
  .titleHover:hover {
    cursor: pointer;
    color: #2db7f5;
  }
  .item-name,
  .rate,
  .bottom {
    color: #5f5f5f;
    font-size: 14px;
  }
  .floatRight {
    float: right;
  }
  .rate {
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 10px;
  }
  .bottom {
    padding-top: 8px;
  }
  .down {
    color: #10d310;
  }
  .up {
    color: red;
  }
}

.h5-desc {
  padding-top: 10px;
}
.charts-line {
  //margin: 0px 13px 13px 13px;
  display: flex;
  .left {
    flex: 1;
    background: white;
    //padding: 10px;
  }
  .right {
    //padding: 10px 15px;
    background: white;
    height: 350px;
    width: 1px;
    margin-left: 16px;
    .badge-count {
      padding: 3px 7px;
      position: relative;
      border: 1px solid #eee;
      border-radius: 50%;

      margin-right: 11px;
    }
    .badge {
      background: #e2e2e2;
      color: #3a3535;
    }
    .top3 {
      background: #2db7f5;
      color: white;
    }
    .cell {
      position: relative;
      display: flex;
      padding: 12px 0;
      border-bottom: 1px dotted #eee;
    }
    .primary {
      flex: 1;
    }
    .title {
      font-size: 16px;
      padding-bottom: 6px;
      border-bottom: 1px solid #eee;
      margin-bottom: 11px;
    }
    .name {
      font-size: 15px;
      position: relative;
      top: 5px;
      color: #303133;
      left: 12px;
    }
    .desc {
      margin-left: 27px;
      font-size: 12px;
      color: #b3b3b3;
      position: relative;
      top: 5px;
    }
  }
}
</style>
